<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item >日记管理</el-breadcrumb-item>
      <el-breadcrumb-item>日记列表</el-breadcrumb-item>
      <el-breadcrumb-item>新增日记</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 搜索框 -->
    <!-- <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
      <el-form-item label="日记标题">
        <el-input
          v-model="searchFrom.dairyName"
          placeholder="请输入日记标题"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form> -->
    <div v-if="tableData">
      <!-- 表单 -->
      <el-table :data="tableData.result" style="width: 100%" align="center">
        <el-table-column
          align="center"
          prop="d_img"
          label="日记图片"
          width="180"
        >
          <template slot-scope="scope">
            <el-image
              :src="scope.row.d_img"
              style="width: 80px; height: 80px"
              fit="contain"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="d_man_name"
          label="伴宠人员"
          width="180"
        >
        </el-table-column>
        <el-table-column align="center" prop="d_city" label="发表城市">
          <template slot-scope="scope"> {{ scope.row.d_city }}</template>
        </el-table-column>
        <el-table-column align="center" prop="d_time" label="发表时间">
          <template slot-scope="scope"> {{ scope.row.d_time }}</template>
        </el-table-column>
        <el-table-column align="center" prop="d_detail" label="发表详情">
          <template slot-scope="scope"> {{ scope.row.d_detail }} </template>
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteBusiness(scope.row.d_id)"
              ></el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 20px 0px; text-align: right"
        background
        layout="prev, pager, next"
        :total="tableData.total"
        :page-size="tableData.pagesize"
        @current-change="changePage"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchFrom: {
        dairyName: "", //商家名称
      },
      tableData: null, //存储表格数据,表格中包含{page,pagesize,result,total}
    };
  },
  methods: {
    // 修改当前页
    changePage(val) {
      console.log(val);
      let url = `/pet-diary?page=${val}&pagesize=4`;
      this.axios.get(url).then((res) => {
        console.log("加载商家列表", res);
        this.tableData = res.data.data;
      });
    },
    
    // 删除事件
    deleteBusiness(d_id) {
      // 弹窗确认
      this.$confirm("是否确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.axios.post("/pet-diary/del", `d_id=${d_id}`).then((res) => {
            console.log("删除商家", res);
            if (res.data.code == 200) {
              this.loadDiaryList();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 加载商家列表
    loadDiaryList() {
      this.axios.get("/pet-diary?page=1&pagesize=4").then((res) => {
        console.log("加载商家列表", res);
        this.tableData = res.data.data;
      });
    },
  },
  // 页面挂载完成之后执行，加载商家列表
  mounted() {
    this.loadDiaryList();
  },
};
</script>
